<template>
	<div>Child子集组件</div>
	<h3>msg: {{ msg }}</h3>
	<h3>count: {{ count }}</h3>
</template>

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
	name: "Child",
	props: ["msg"],
	// setup细节问题：

	// setup在执行的时候，当前的组件还没有渲染出来，也就意味着组件实例的this根本不能使用
	// this是undefined就说明不能再执行的时候，调用data,computed,methods，props的相关属性内容！
	// setup是在beforeCreate生命周期之前执行，而且只执行了一次！
	// 其实所有的composition API相关回调函数中也都不可以

	// 一般都返回一个对象: 为模板提供数据, 也就是模板中可以直接使用此对象中的所有属性/方法
	// 返回对象中的属性会与data函数返回对象的属性合并成为组件对象的属性
	// 返回对象中的方法会与methods中的方法合并成功组件对象的方法
	// 如果有重名, setup优先

	beforeCreate() {
		console.log("beforeCreate执行了...")
	},
	// 界面渲染后的生命周期回调
	mounted() {
		console.log(this)
	},
	setup() {
		console.log("setup执行了", this)
		return {
			// setup中一般都是返回一个对象，对象中的属性和方法都可以直接在html中进行使用！
		}
	},
	data() {
		return {
			count: 10
		}
	}
})
</script>
